<template>
    <div class="detail">
        <detail-nav-bar class="detail-nav" @navBarClick="navBarClick" ref="nav"></detail-nav-bar>
        <scroll class="content" ref="scroll" @scroll1="scroll1" :probeType="3">
            <detail-swiper :detailBanners="topImages"></detail-swiper>
            <detail-base-info :goods="goods"></detail-base-info>
            <detail-shop-info :shop="shop"></detail-shop-info>
            <detail-image-info :detailInfo="detailInfo" ref="imageInfo" @imageLoad="imageLoad">
            </detail-image-info>
            <detail-param-info :params="params" ref="params"></detail-param-info>
            <detail-comment-info :commentInfo="commentInfo" ref="comment"></detail-comment-info>
            <good-list :goods="recommends" ref="goods" class="goodsList"></good-list>
           
        </scroll>
        <back-top @click.native="backClick" v-show="isShow"></back-top>
        <detail-bottom-bar @addToCar="addToCar"></detail-bottom-bar>
        <toast :message="message" :isShow="isShow"></toast>
    </div>
</template>

<script>
import DetailNavBar from './childDetail/DetailNavBar.vue'
import DetailSwiper from './childDetail/DetailSwiper'
import DetailBaseInfo from './childDetail/DetailBaseInfo'
import DetailShopInfo from './childDetail/DetailShopInfo'
import Scroll from 'components/common/scroll/Scroll'
import DetailImageInfo from './childDetail/DetailImageInfo'
import DetailParamInfo from './childDetail/DetailParamInfo'
import DetailCommentInfo from './childDetail/DetailCommentInfo'
import GoodList from 'components/content/goodList/GoodList'
import DetailBottomBar from './childDetail/DetailBottomBar'
import BackTop from 'components/content/backTop/BackTop'


import {getDetail, Goods, Shop, Param, getRecommend} from 'network/detail'
import {itemListerMixin} from 'common/mixin'
import {debounce} from 'common/utils'

// import {a} from './../../store/mutations-type'
import {mapActions} from 'vuex'

import Toast from 'components/common/toast/Toast'












export default {
    name: 'Detail',
    components: {
        DetailNavBar,
        DetailSwiper,
        DetailBaseInfo,
        DetailShopInfo,
        Scroll,
        DetailImageInfo,
        DetailParamInfo,
        DetailCommentInfo,
        GoodList,
        DetailBottomBar,
        BackTop,
        Toast,
    },
 
    data() {
        return{
            iid: '',
            topImages: [],
            goods: {},
            shop: {},
            detailInfo: {},
            params: {},
            commentInfo: {},
            recommends: [],
            offsetTop: [],
            throttle: null,
            currentIndex: null,
            isShow: null,
            message: '',
            isShow: false
            
        }
    },
    
 
    async created() {
       
        this.iid = this.$route.params.iid
        // console.log(this.iid)
        
        const res = await getDetail(this.iid)
        const date = res.result
        // console.log(res)
        // 1. 获取轮播图数据
        this.topImages = date.itemInfo.topImages

        // 2. 获取商品信息
        this.goods = new Goods(date.itemInfo, date.columns, date.shopInfo.services)

        // 3. 获取店铺数据
        this.shop = new Shop(date.shopInfo)

        // 节流

        this.throttle = debounce(() => {
                this.offsetTop = []
                this.offsetTop.push(0)
                this.offsetTop.push(-this.$refs.params.$el.offsetTop)
                this.offsetTop.push(-this.$refs.comment.$el.offsetTop)
                this.offsetTop.push(-this.$refs.goods.$el.offsetTop)
                this.offsetTop.push(-Number.MAX_VALUE)
                // console.log(this.offsetTop)
            }, 120)

        // 4. detailInfo 图片数据
        this.detailInfo = date.detailInfo

        // 5. 参数相关数据

        this.params = new Param(date.itemParams.info, date.itemParams.rule)

        // 6. 评论数据
        if (date.rate.cRate !== 0) {
            this.commentInfo = date.rate.list[0]
        }
        

        // 二

        const res2 = await getRecommend()
        // console.log(res2)
        this.recommends = res2.data.list

        // 下一帧
        this.$nextTick(() => {
            // 拿到数据之后，DOM已经渲染完，但是图片没有加载完
           
        
        })

        
        

    },

    mixins: [itemListerMixin],
    
    mounted() {
       
        
            // console.log(8)
        // this.offsetTop.push()
        

       
            
        
    },
    destroyed() {
        this.$bus.$off('itemImageLoad', this.itemImgListener)
    },
    methods: {
        ...mapActions(['addCart']),
        imageLoad() {
            this.newRefresh()
            this.throttle()
            

        },
        navBarClick(index) {
            // console.log(index)
            this.$refs.scroll.backTop(0, this.offsetTop[index], 800)
        },
        scroll1(position){
            // console.log(position.y)
            const positiony = -position.y
            // this.offsetTop.forEach((item, index) => {
            //     if (positiony > item && positiony < this.offsetTop[index]) {
            //         console.log(index)
            //     }
            // })
            const length = this.offsetTop.length
            for (let i = 0; i < length; i++) {
                if (this.currentIndex !== i && positiony > -this.offsetTop[i] && positiony < -this.offsetTop[i + 1]) {
                    // console.log(i)
                    this.currentIndex = i
                    this.$refs.nav.currentIndex = this.currentIndex
                }
                // 2. 复杂判断
                // if (this.currentIndex !== i && ((i < length - 1 && positiony >= -this.offsetTop[i] && positiony < -this.offsetTop[i + 1])
                //  || (i === length - 1 && positiony >= -this.offsetTop[i]))) {
                //     this.currentIndex = i
                //     // console.log(i)
                //     this.$refs.nav.currentIndex = this.currentIndex
                // }
            }

            this.isShow = position.y < -1000

        },
        backClick() {
            this.$refs.scroll.backTop(0, 0,)
        },

        addToCar() {
            // console.log('----')
            const res = {}
            res.image = this.topImages[0]
            res.title = this.goods.title
            res.desc = this.goods.desc
            res.price = this.goods.lowPrice
            res.iid = this.iid
            // console.log(res)
            // console.log(this.$store.carList)
            // this.$store.state.carList.push(res) 需从mutations修改状态
            // 1.
            // this.$store.dispatch('addCart', res).then(res => {
            //     console.log(res);
            // })
            // 方法2
            this.addCart(res).then(res => {
                // console.log(res)
                // this.message = res
                // this.isShow = true

                // setTimeout(() => {
                //     this.isShow = false
                // }, 2000)
                // console.log(this.$toast)
                // 2. 插件方式
                this.$toast.show(res, 3000)
            })

        }

    }
}
</script>

<style scoped>
    .detail{
        position: relative;
        z-index: 9;
        background: #fff;
        height: 100vh;
    }

    .detail-nav{
        position: relative;
        z-index: 9;
        background: #fff;
    }

    .content{
        height: calc(100% - 44px - 49px);
        overflow: hidden;
    }

    .goodsList{
        padding-bottom: 60px;
    }
</style>